<!--
 * @Author: ckk
 * @Date: 2022年7月19日16:46:53
 * @LastEditors: ckk
 * @LastEditTime: 2022-08-23 09:57:30
 * @Description: your project
 * @version: 1.0
-->
<template>
  <div class="footer">
    <div class="foot-item" v-for="(item,index) in datas.setStyle.iconList" :key="index" @click="jumpTab(item.url, index)">
      <img :src="active == index?item.iconPic:item.inactive" alt="" :width="datas.setStyle.iconWidth">
      <div class='dot' v-show="item.isDot"></div>
      <span :class="active == index?'active':''" :style="{fontSize: datas.setStyle.fontSize+'px'}">{{item.iconText}}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FooterView',
  props: {
    datas: Object,
    active: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
    };
  },
  methods: {
    jumpTab (urlname, index) {
      this.$emit('update', { urlname, index });
    }
  }
};
</script>

<style scoped lang="scss">
.footer {
  min-height: 50px;
  background: #ffffff;
  box-shadow: 0px -2px 8px 1px rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  justify-content: space-around;
  .foot-item{
    font-size: 10px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    span{
      padding-top:4px;
      color:#737373;
    }
    img{
      width:24px;
      height: auto;
      display:block;
      margin:0 auto;
    }
    .dot{
  width:1px;
    height:1px;
    border-radius:50%;
    transform:scale(6);
    background:red;
      position: absolute;
      top:2px;
      right:0;
    }
    .active{
      color:#52CC70;
    }
  }
}
</style>
